<!-- extends表明此页面继承自 base.html 文件 -->
{% extends "org-detail-base.html" %}
{% load staticfiles %}
<!-- 写入 base.html 中定义的 title -->
{% block title %}
    机构课程
{% endblock title %}
<!-- 写入 base.html 中定义的 content -->
{% block content_org %}
    <div class="column is-full">
        <div class="box">
            <div class="box columns is-horizontal has-background-primary">
                <div class="column">
                    <span class="title is-3 has-text-white">机构课程</span>
                </div>
                <div class="column has-text-right">
                    <a class="has-text-link-light" href="{% url 'org:home' course_org.id %}?nav_tab=home">
                        <span class=" title is-4 has-text-link-light">
                            返回&nbsp;&nbsp;<i class="fa fa-angle-double-left" aria-hidden="true"></i>
                         </span>
                    </a>
                </div>
            </div>
            <div class="columns is-multiline">
                {% if courses %}
                    {% for course in courses.object_list %}
                        <div class="column is-3-desktop">
                            <div class="card">
                                <div class="card-image">
                                    <figure class="image is-16by9">
                                        <img src="{{ MEDIA_URL }}{{ course.image }}"
                                             alt="Placeholder image">
                                    </figure>
                                </div>
                                <div class="card-content has-background-primary">
                                    <div class="media">
                                        <div class="media-left">
                                            <figure class="image is-48x48">
                                                <img class="is-rounded"
                                                     src="{{ MEDIA_URL }}{{ course.teacher.avatar }}"
                                                     alt="Placeholder image">
                                            </figure>
                                        </div>
                                        <div class="media-content">
                                            <p class="title is-4">
                                                <a href="{% url 'course:home' course.id %}"
                                                   class="has-text-link-light">
                                                    {{ course.name }}
                                                </a>
                                            </p>
                                            <p class="subtitle is-6">@{{ course.teacher.name }}</p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                    {% endfor %}

                {% endif %}
                <div class="column is-full">
                    <nav class="pagination is-rounded is-centered" role="navigation"
                         aria-label="pagination">

                        {% if courses.has_previous %}
                            <a class="pagination-previous"
                               href="?{{ courses.previous_page_number.querystring }}">上一页</a>
                        {% endif %}
                        <ul class="pagination-list">
                            {% for page in courses.pages %}
                                {% if page %}
                                    {% ifequal page courses.number %}
                                        <li>
                                            <a class="pagination-link is-current"
                                               href="?{{ page.querystring }}"
                                               aria-label="Goto page 1">
                                                {{ page }}
                                            </a>
                                        </li>
                                    {% else %}
                                        <li>
                                            <a class="pagination-link"
                                               href="?{{ page.querystring }}"
                                               aria-label="Goto page 1">
                                                {{ page }}
                                            </a>
                                        </li>
                                    {% endifequal %}
                                {% else %}
                                    <li><span class="pagination-ellipsis">&hellip;</span></li>
                                {% endif %}
                            {% endfor %}
                        </ul>
                        {% if courses.has_next %}
                            <a class="pagination-next"
                               href="?{{ courses.next_page_number.querystring }}">
                                下一页
                            </a>
                        {% endif %}
                    </nav>
                </div>
            </div>

        </div>
    </div>
{% endblock %}